import React from 'react';
import { Image, Typography } from 'antd';
import { Link } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom"
interface PropsType {
  id: string | number,
  size: 'large' | 'small',
  imageSrc: string,
  price: number | string,
  title: string
}


export const ProductImage: React.FC<PropsType> = ({ id, size, imageSrc, price, title }) => {
  const navigate = useNavigate();
  const onDetail = (id) => {
    navigate(
      '/detail',
      { state: { id: id } }
    )
  }

  return (
    <div>
      {size === 'large' ? (
        <Image src={imageSrc} height={285} width={490} />
      ) : (
        <Image src={imageSrc} height={120} width={240} />
      )}
      <div onClick={() => { onDetail(id) }}>
        <Typography.Text type='secondary'>
          {title.slice(0, 25)}
        </Typography.Text>
        <Typography.Text type='danger' strong>
          {price}
        </Typography.Text>
      </div>
    </div >
  )
}